<template>
    <div class="login" v-loading="loading">
        <canvas id="myCanvas"></canvas>
        <div class="box">
            <div class="title">码云</div>
            <div v-if="loginType == 'music'">
                邮箱：<input type="text" v-model="data.mail">
            </div>
            <div v-if="loginType == 'gcosc'">
                学号：<input type="text" v-model="data.u_stu">
            </div>
            <div>
                密码：<input type="password" v-model="data.password">
            </div>
            <el-radio-group v-model="loginType">
<!--                <el-radio-button label="default">默认</el-radio-button>-->
                <el-radio-button label="gcosc">吉福杯账号登录</el-radio-button>
            </el-radio-group>
            <div>
                <el-button @click="login">
                    登录
                </el-button>
<!--                <el-button @click="reg">-->
<!--                    注册-->
<!--                </el-button>-->
            </div>
        </div>
        <footerVue/>
    </div>
</template>

<script>
    import footerVue from '@/components/footer/footer.vue';
    import { login, loginGcosc } from '@/api/auth'
    export default {
        components : {
            footerVue
        },
        data() {
            return {
                data : {
                    mail : '',
                    password : '',
                    u_stu : ''
                },
                loading : false,
                interval : null,
                loginType : 'gcosc',
            }
        },
        created(){
            if (this.$route.query.type == 'Logout') {
                localStorage.clear()
                sessionStorage.clear()
                this.$toast.success('退出成功')
                this.$router.push('/login')
                setTimeout(() => {
                    location.reload()
                }, 1000)
            }
        },
        methods : {
            login(){
                this.loading = true

                if (this.loginType == 'gcosc'){
                    return this.loginGcosc()
                }
                this.loginGetToken(this.data)
            },
            loginGetToken(data){
                login(data).then(res => {
                    this.loading = false
                    if (res.code == 200) {
                        this.$router.push('/student/homePaper')
                    }
                })
            },
            // 吉福杯账号登录
            loginGcosc(){
                loginGcosc(this.data).then(res => {
                    this.loading = false
                    if (res.data.rspCode == 200){
                        this.loginGetToken({
                            account : res.data.data,
                            userFrom : 'gcosc'
                        })
                    }else {
                        this.$message.error(res.data.data)
                    }
                })
            },
            reg(){
                location.href = 'http://www.gcosc.fun/music/#/login?type=2'
            }
        },
        beforeDestroy(){
            if (this.interval) {
                clearInterval(this.interval)
            }
        }
    }
</script>

<style lang="scss" scoped>
.login{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    // background-color: lightseagreen;
    color: #fff;
    // background: #000;
    
    background: #2d3a4b;
    #myCanvas{
        position: absolute;
        top: 0;
    }
    .box{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        // background-color: rgba($color: #fff, $alpha: 0.2);
        padding: 30px 0;
        border-radius: 30px;
        z-index: 999;
        .title{
            font-weight: 900;
            font-size: 20px;
        }
        input{
            padding: 10px 20px;
            outline: 0 none;
            border: none;
            // background-color: lightseagreen;
            // border-bottom: 1px solid #fff;
            box-sizing: border-box;
            color: #000;
            font-size: 16px;
            max-width: 70%;
            border-radius: 10px;
        }
        &>div{
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 10px 0;
            width: 100%;
        }
    }

}
</style>